<template>
    <rx-layout class="rx-center">
        <template v-slot:center>
            <view style="padding: 0.5rem">
                <div v-for="(item,index) in metadataChildren" :key="index">
                    <div v-if="showControl(item.controlConfig,curVal)" style="margin-bottom: 0.5rem">
                        <MFormTitle v-if="item.controlConfig.control.showTitle"
                                    :name="item.controlConfig.name"
                                    style="margin-bottom: 0.5rem"
                                    :metadata="item.controlConfig"
                                    :readOnly="curReadOnly(item.controlConfig,curVal)"
                                    :required="curRequired(item.controlConfig,curVal)"
                                    :rules="item.controlConfig.rules"
                                    :data="row"
                        ></MFormTitle>
                        <m-component
                            v-model="row[item.controlConfig.field]"
                            :data="row"
                            :metadata="item.controlConfig"
                            :readOnly="curReadOnly(item.controlConfig,curVal)">
                        </m-component>
                    </div>
                </div>
            </view>
        </template>
        <template v-slot:footer>
            <div class="rx-button">
                <div class="rx-name" @click="close">{{i18n('close','取消')}}</div>
                <div class="rx-name rx-highlight" @click="confirm">{{i18n('confirm','确定')}}</div>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import SubTable from "./SubTable.js"
import RxLayout from '@/components/RxLayout'
import FormValidate from "../../form/customForm/js/FormValidate";
export default {
    name: "MSubTableLatticeDialog",
    mixins: [SubTable,FormValidate],
    provide(){
        return {
            formVm:this.$parent.formVm
        }
    },
    components:{
        RxLayout,
    },
    props: {
        row: {
            default: () => {//行数据
            }
        },
        metadataChildren: {
            default: () => {//子表配置
            }
        },
        /**
         * 如果组件中包含对话框，则需要传递该参数，RxDialog的options配置
         */
        dialogOptions: {
            type: Object,
        },
        dialogClose: {
            type: Function,
        },
        subKey:{
            type:String,//子表名
        }
    },
    data() {
        return {
            curVal:{}
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        async confirm() {
            let parity = await this.formCheckRule()
            if (parity && !parity.success) {
                //校验不通过
                uni.showToast({
                    title: parity.msg, duration: 2000, icon: 'none'
                });
                return
            }
            this.$emit('confirm', this.curVal)
        },
        formCheckRule(){
            for (let objChildren of this.metadataChildren) {
                if (this.formVm.permission.subTable[this.subKey][objChildren.field] != 'none') {
                    let name =this.$i18(objChildren.controlConfig.name)
                    for (let rulesItem of objChildren.controlConfig.rules) {
                        let fn = this.reqMsg(rulesItem, objChildren.controlConfig, this.curVal[objChildren.controlConfig.field], name, this.formVm.permission.subTable[this.subKey].fields[objChildren.field], this.curVal)
                        if (fn && !fn.success) {
                            return fn
                            break
                        }
                    }
                    if (this.formVm.permission.subTable[this.subKey].fields[objChildren.field] == 'required' && !this.curVal[objChildren.controlConfig.field]) {
                        return {success: false, msg: name + this.i18n('REQUIRED','必填')};
                        break
                    }
                }
            }
        },
        close() {
            this.$emit('close')
        }
    },
    watch: {
        row: {
            handler(v) {
                this.curVal = v;
            },
            deep: true,
            immediate: true
        }
    },

}
</script>

<style scoped>
.rx-center>>>.RxLayout-center{
    background: white!important;
}
.rx-button{
    display: flex;
    grid-gap: 0.5rem;
    margin: 0.5rem;
}
.rx-name {
    flex: 1;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    height: 2rem;
    justify-content: center;
    align-items: center;
}
.rx-highlight {
    color: white;
    border: none;
    background: rgba(66, 133, 244, 1);
}
</style>
